<template>
  <div id="scan">
    <div v-if="messageList.records && !messageList.records.length" class="nodata">
      <NoData />
    </div>
    <van-swipe-cell
      :right-width="rightWidth"
      v-for="(item,index) in messageList.records"
      :key="index"
    >
      <van-cell-group>
        <div class="scan_inner" @click.stop="goVoiceDetail(item.id)">
          <div class="left">
            <div class="left_inner" v-if="item.type === 0">
              <van-icon name="volume" class="voice_logo" />
            </div>
            <div v-else class="left_inner bellBg">
              <van-icon name="bell" class="voice_logo" />
            </div>
          </div>
          <div class="right">
            <div class="title">
              <!-- 根据  type 字段判断   0系统公告  1平台通知
                返回的参数字段也是 type （已添加）
              目前数据只有 0系统公告-->
              <span class="name">{{item.type ===0 ? '系统公告': '平台通知'}}</span>
              <span class="time_gray">{{item.create_time}}</span>
            </div>
            <!-- <div class="content">{{item.content}}</div> -->
            <div class="content">{{item.title || item.content}}</div>
          </div>
        </div>
      </van-cell-group>
      <view slot="right" @click="fnDelmessage(index,item.id)">删除</view>
    </van-swipe-cell>
    <div v-if="loading">
      <p class="noMoreData">没有更多的数据了</p>
    </div>
    <!--<button @click="handleScan">扫码查看图书</button>-->
  </div>
</template>
<script>
import { get } from "../../utils/request";
import NoData from "@/common/components/noData";
export default {
  components: { NoData },
  data() {
    return {
      rightWidth: 65, // 右侧滑动区域宽度
      messageList: {},
      loading: false, // 是否有更多数据
      page: {
        current: 1,
        size: 15
      }
    };
  },
  onLoad() {
    this.fnMessage();
  },
  methods: {
    goVoiceDetail(id) {
      wx.navigateTo({
        url: "/pages/scanDetail/main?id=" + id
      });
    },
    handleScan() {
      // 调用收集摄像头扫码
      wx.scanCode({
        async success(res) {
          let scanCode = res.result;
          if (!/[a-z]/gi.test(scanCode)) {
            let result = await get("/scanBook", { scanCode });
            wx.navigateTo({
              url:
                "/pages/bookItem/main?bookItem=" + JSON.stringify(result.data)
            });
          } else {
            wx.showToast({
              title: "扫码格式不对"
            });
          }
        },
        fail() {
          wx.showToast({
            title: "扫码格式不对"
          });
        }
      });
    },
    // 消息类表
    fnMessage() {
      this.$http
        .post({
          url: "/mobile/api/message",
          data: {
            customer_id: wx.getStorageSync("userInfo").customer_id,
            current: this.page.current,
            size: this.page.size
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            if (this.page.current == "1") {
              this.messageList = res.data;
            } else {
              this.messageList.current = res.data.current;
              this.messageList.pages = res.data.pages;
              this.messageList.records = this.messageList.records.concat(
                res.data.records
              );
              this.messageList.searchCount = res.data.searchCount;
              this.messageList.size = res.data.size;
              this.messageList.total = res.data.total;
            }
            this.page.current++; // 分页参数
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // 删除消息
    fnDelmessage(index, id) {
      this.$http
        .post({
          url: "/mobile/api/delmessage",
          data: {
            customer_id: wx.getStorageSync("userInfo").customer_id,
            id: id
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.messageList.records.splice(index, 1);
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    }
  },
  // 分页
  onReachBottom() {
    this.loading = false;
    if (!this.loading && this.page.current <= this.messageList.pages) {
      this.fnMessage();
    } else {
      this.loading = true;
    }
  }
};
</script>
<style lang="less">
#scan {
  width: 100%;
  box-sizing: border-box;
  // padding: 10px;
  .scan_inner {
    height: 71px;
    border-bottom: 1px solid #ececec;
    overflow: hidden;
    display: flex;
    align-items: center;
    .left {
      width: 91px;
      height: 70px;
      line-height: 70px;
      float: left;
      display: flex;
      align-items: center;
      .left_inner {
        width: 36px;
        height: 36px;
        line-height: 38px;
        margin: 10px auto;
        border-radius: 18px;
        text-align: center;
        /*background: #2EB3FB;*/
        background: linear-gradient(to right, #2eb3fb, #195bfc);
        .voice_logo {
          color: #fff;
        }
      }
      .bellBg {
        background: linear-gradient(to right, #f68959, #ff3b56);
      }
    }
    .right {
      float: left;
      .title {
        & > span {
          display: inline-block;
        }
        .name {
          width: 160px;
          height: 33px;
          line-height: 33px;
          text-align: left;
          font-size: 14px;
        }
        .time_gray {
          font-size: 12px;
          color: #999;
        }
      }
      .content {
        font-size: 12px;
        color: #666;
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: left;
        width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .demo-swipe-cell {
    user-select: none;
  }
  .van-swipe-cell__left,
  .van-swipe-cell__right {
    display: inline-block;
    width: 65px;
    height: 70px;
    font-size: 15px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    background-color: #ee0a24;
  }
}
.nodata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.noMoreData {
  text-align: center;
  font-size: 30rpx;
  color: #999999;
  padding: 20rpx 0;
}
</style>
